<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <%--引入element的js--%>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <%--引入elementui的样式--%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<body>
<div id="app">
  <el-form :inline="true" :model="staffvo" class="demo-form-inline">
    <el-form-item label="账号">
      <el-input v-model="staffvo.staffId" placeholder="请输入账号"></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="staffvo.staffName" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="shuaxin">刷新</el-button>
      <el-button type="primary" @click="addAlls">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table
          :data="staffs"
          border
          style="width: 100%">
    <el-table-column
            prop="userId"
            label="编号"
    >
    </el-table-column>
    <el-table-column
            prop="userAccount"
            label="用户账号"
    >
    </el-table-column>
    <el-table-column
            prop="userPwd"
            label="用户密码">
    </el-table-column>
    <el-table-column
            prop="userNick"
            label="用户昵称 ">
    </el-table-column>
    <el-table-column
            prop="userHead"
            label="头像">
      <template slot-scope="scope">
        <img style="width: 140px;height: 70px" :src="scope.row.userHead">
      </template>
    </el-table-column>

    <el-table-column
            prop="userSex"
            label="性别">
    </el-table-column>
    <el-table-column
            prop="userAddress"
            label="地址">
    </el-table-column>
    <el-table-column
            prop="userIdcard"
            label="身份证">
    </el-table-column>
    <el-table-column
            prop="userPhone"
            label="手机号码">
    </el-table-column>
    <el-table-column
            prop="userBalance"
            label="余额">
    </el-table-column>
      </template>
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="200">
      <template slot-scope="scope">
        <el-button @click="deleterole(scope.row)" type="primary" size="small">删除</el-button>
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
  <el-dialog title="编辑用户信息 " :visible.sync="dialogFormVisible2" width="500px">
    <el-form :model="editForm" <%--:rules="addRule"--%> ref="aaa"  >
      <el-form-item label="头像" label-width="60" prop="userHead">
        <el-image
                style="width: 100px; height: 100px"
                :src="editForm.userHead"
                @click="clickImage"
                v-if="flg"
        ></el-image>

        <el-upload
                :hidden="flg"
                ref="upload"
                @click="handleClick"
                :background="editForm.userHead"
                class="avatar-uploader"
                action="/upLoad/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户账号" label-width="80" prop="userAccount" >
        <el-input v-model="editForm.userAccount" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" label-width="80" prop="userPwd">
        <el-input v-model.number="editForm.userPwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" label-width="80" prop="userNick">
        <el-input v-model="editForm.userNick" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" label-width="60" prop="userSex">
        <el-input v-model="editForm.userSex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" label-width="60" prop="userAddress">
        <el-input v-model="editForm.userAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证" label-width="60" prop="userIdcard">
        <el-input v-model="editForm.userIdcard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" label-width="80" prop="userPhone">
        <el-input v-model="editForm.userPhone" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      <el-button type="primary" @click="edituser">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="添加用户信息 " :visible.sync="dialogFormVisible" width="500px">
    <el-form :model="addForm" :rules="addRule" ref="aaa"  >
      <el-form-item label="头像" label-width="60" prop="userHead">
        <el-upload
                class="avatar-uploader"
                action="/upLoad/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户账号" label-width="80" prop="userAccount" >
        <el-input v-model="addForm.userAccount" autocomplete="off" @blur="blur(addForm.userAccount)"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" label-width="80" prop="userPwd">
        <el-input v-model.number="addForm.userPwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" label-width="80" prop="userNick">
        <el-input v-model="addForm.userNick" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" label-width="60" prop="userSex">
        <el-input v-model="addForm.userSex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" label-width="60" prop="userAddress">
        <el-input v-model="addForm.userAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证" label-width="70" prop="userIdcard">
        <el-input v-model="addForm.userIdcard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" label-width="80" prop="userPhone">
        <el-input v-model="addForm.userPhone" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addFormUser">确 定</el-button>
    </div>
  </el-dialog>
</div>
</body>
<script>
  let app=new Vue({
    el: "#app",
    data: {
      //员工表格的数据
      staffs: [],
      //当前的页码
      current: 1,
      //每页的条数
      pageSize: 5,
      //总条数
      total: 0,
      /*控制添加页面显示和隐藏*/
      dialogFormVisible: false,
      /*控制编辑页面显示和隐藏*/
      dialogFormVisible2: false,
      /*修改*/
      editForm: {},
      /*增加*/
      addForm: {},
      staffvo:{
        staffId:"",
        staffName:"",
      },
      flg:true,
      imageUrl:"",
       var:validateGender = (rule, value, callback) => {
        if (value !== '男' && value !== '女') {
          callback(new Error('请输入男或女'));
        } else {
          callback();
        }
      },
      addRule:{
        userAccount:[
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        userPwd:[
          { required: true, message: '密码不能为空'},
        ],
        userNick:[
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        userSex:[
          { required: true, message: '性别不能为空', trigger: 'blur' },
          { required: true, message: '请输入性别', trigger: 'blur' },
          { validator: validateGender, trigger: 'blur' }
        ],
        userAddress:[
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        userIdcard:[
          { required: true, message: '身份证不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (!value) {
                return callback();
              }
              if (!Number.isFinite(+value)) {
                callback(new Error('请输入有效的数字'));
              } else {
                callback();
              }
            },
            trigger: 'blur'},
          { len: 18, message: '数字长度必须是 18', trigger: 'blur' }
        ],
        flg:false,
        userPhone:[
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (!value) {
                return callback();
              }
              if (!Number.isFinite(+value)) {
                callback(new Error('请输入有效的数字'));
              } else {
                callback();
              }
            },
            trigger: 'blur'},
          { len: 11, message: '数字长度必须是 11', trigger: 'blur' }
        ],
      },
    },

    created() {
      this.loadTable();
    },
    methods: {
      handleClick(){
        this.$refs.upload.$el.querySelector('input').click()
      },
      clickImage(){
        this.handleClick()
      },
      //上传图片成功
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.addForm.userHead=res.data
        this.editForm.userHead=res.data
      },
      //图片限制
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 确认添加
      addFormUser(){
        if(this.flg){
          this.$refs.aaa.validate((valid) => {
            if (valid){
              axios.post("/user/insert",this.addForm).then(res=>{
                this.$refs.aaa.resetFields();
                this.imageUrl=""
                this.dialogFormVisible=false
                this.$message.success("添加成功")
                this.loadTable()
              })
            }

          })
        }else {
          this.$message.error("添加失败")
        }
      },
      //添加
      addAlls(){
        this.dialogFormVisible=true
      },
      // 刷新
      shuaxin(){
        this.staffvo.staffName=''
        this.staffvo.staffId=null
        this.loadTable()
      },
      // 确认编辑信息
      edituser(){
        this.$refs.aaa.validate((valid) => {
          if (valid) {
            axios.post("/user/update/",this.editForm).then(res => {
              this.dialogFormVisible2 = false;
              this.$message.success("修改成功")
              this.loadTable()
            })
          }
        })
      },
      // 在这里实现编辑员工信息的逻辑
      handleEdit(row) {
        this.dialogFormVisible2 = true;
        this.editForm =JSON.parse(JSON.stringify(row));
        if(this.editForm.userHead==='') {
          this.flg=false;
        }else {
          this.flg=true;
        }
      },
      search() {
        this.current = 1;
        this.loadTable()
      },
      //初始化员工表格数据
      loadTable() {
        axios.post("/user/select/" + this.current + "/" + this.pageSize, this.staffvo).then(result => {
          this.staffs = result.data.data.list;
          this.total = result.data.data.total;
        })
      },

      blur(no){
        console.log("======失去焦点======")
        console.log(no)
        if(no!=null ||no!="") {
          axios.get("/user/selectByCount/" + no).then(res => {
            if (res.data.code === 500) {
              this.$message.error(res.data.msg);
            } else if (res.data.code === 200) {
              this.flg = true
            }
          })
        }
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.loadTable();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.loadTable();
      },
      //删除
      deleterole(row) {
        console.log(row);
        axios.post("/user/delete/"+ row.userId)
                .then(result => {
                  // 删除成功后重新加载表格数据
                  this.loadTable();
                  this.$message.success('删除成功');
                })
                .catch(error => {
                  console.error('删除失败', error);
                  this.$message.error('删除失败');
                });
      },
    }
    })

</script>
</html>

